<template>
  <div style="min-width: 809px">
    <div v-if="$route.path == '/cardRecords'">
      <!-- <div class="vs-search-box" style="padding: 24px 22px">
        <el-form ref="form" :inline="true" :model="paging" label-width="130px">
          <el-form-item label="门店:">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" style="float: right; margin-right: 0">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
          </el-form-item>
        </el-form>
      </div> -->
      <div class="vs-table-box">
        <el-table
          v-loading="loading"
          :data="tableData"
          style="width: 100%"
          height="73.1vh"
        >
          <el-table-column label="序号" prop="id"></el-table-column>
          <el-table-column prop="username" label="姓名">
            <template slot-scope="scope">
              <span v-if="scope.row.user">{{ scope.row.user.username }}</span>
            </template>
          </el-table-column>
          <el-table-column label="门店">
            <template slot-scope="scope">
              <span v-if="scope.row.store">{{ scope.row.store.title }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="退卡金额"
            prop="return_money"
          ></el-table-column>
          <el-table-column
            label="退卡日期"
            prop="create_time"
          ></el-table-column>
        </el-table>
        <div class="vs-paging-box">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="paging.page"
            :page-size="paging.limit"
            layout="prev, pager, next, jumper"
            :total="paging.total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      paging: {
        page: 1,
        total: 0,
        limit: 10,
      },
      storeList: [],
      tableData: [],
    };
  },
  created() {
    if (this.$route.path == "/cardRecords") {
      this.repairGetList();
      this.homegetStore();
    }
  },
  methods: {
    // 获取全部门店
    async homegetStore() {
      let { code, data } = await this.$Http.homegetStore();
      this.storeList = data;
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.returnVipList(this.paging);
      this.loading = false;
      if (code) {
        this.tableData = data.data;
        this.paging.total = data.total;
      }
    },
    reset() {
      this.paging = this.$options.data().paging;
      this.handleCurrentChange(1);
    },
    handleCurrentChange(val) {
      this.paging.page = val;
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>
.image-thumbnail {
  width: 130px;
  height: 130px;
}
.operation-box {
  display: flex;
  justify-content: flex-end;
}
.vs-search-box {
  padding-bottom: 0 !important;
}
.red {
  color: #f00 !important;
}
.vs-table-box {
  margin-top: 0;
}
</style>